<template>
  <div class="book-classify-item">
    <template v-for="(item) in bookList">
      <div :key="item.id" class="classify-item-content">
        <div class="classify-left">
          <ImageView :src="item.coverUrl" />
        </div>
        <div class="classify-right">
          {{item.authorName}}
          {{item.subCateName}}
          {{item.description}}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import ImageView from '@/components/imageView'
import { mapState } from 'vuex'
export default {
  name: "ClassifyItem",
  data() {
    return {
      bookList: []
    }
  },
  props: {
    book: {
      type: Array
    }
  },
  computed: {
    ...mapState('book', ['bookStore'])
  },
  watch: {
    bookStore(v) {
      console.log("hot组件中：", v)
      this.bookList = v.ranklist0
    }
  },
  components: {
    ImageView
  },
  mounted() {
    // console.log(this.book, 'book')
  },
  methods: {

  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/_common.scss";
.book-classify-item {
  @include wh(96%);
  border: 1px solid #ccc;
}
.classify-item-content {
  @include wh(100%, 100%);
  padding: 2%;
  display: flex;
  .classify-left {
    flex: 3;
  }
  .classify-right {
    flex: 7;
  }
}
</style>
